<template>
  <el-card>
    <template #header>
      <div class="top">
        <div class="left">认证信息</div>
        <div class="right">
          <span>待处理数:</span>
        </div>
      </div>
    </template>
    <el-form inline :model="queryForm" @submit.native.prevent>
      <el-form-item>
        <el-input v-model="queryForm.mobile" placeholder="用户手机号" />
      </el-form-item>
      <el-form-item>
        <el-input v-model="queryForm.name" placeholder="真实姓名" />
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="queryForm.is_card_certified"
          placeholder="实名认证状态"
          @change="changeName"
        >
          <el-option
            v-for="item in form"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-select
          v-model="form.v2"
          placeholder="使用状态"
          @change="changeStatus"
        >
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          icon="el-icon-search"
          native-type="submit"
          type="primary"
          @click="handleQuery"
        >
          查询
        </el-button>
        <el-button @click="handleReset()">重置</el-button>
      </el-form-item>
    </el-form>
    <el-table v-loading="listLoading" :border="border" :data="dataList">
      <el-table-column label="真实姓名" prop="name" />
      <el-table-column label="手机号码" prop="user.mobile" />
      <el-table-column label="认证类型" prop="type_text" />
      <el-table-column label="学校" prop="school" />
      <el-table-column label="学号或工号" prop="student_no" />
      <el-table-column label="年份" prop="year" />
      <el-table-column label="所属区域" prop="user.register_area" />
      <el-table-column label="审核时间" prop="created_at" />
      <el-table-column label="失败原因" prop="user.error_msg" />
      <el-table-column
        align="center"
        fixed="right"
        label="操作"
        show-overflow-tooltip
        width="230"
      >
        <template #default="{ row }">
          <el-button plain type="primary" @click="handleEditId(row)">
            设置
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      :current-page="metaList.page"
      :layout="layout"
      :page-size="metaList.per_page"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
    <id-card ref="show" />
  </el-card>
</template>

<script>
  import { getStudent } from '@/api/shouye'
  import idCard from './components/idCard.vue'
  export default {
    components: {
      idCard,
    },
    data() {
      return {
        cards: [
          { value: '', label: '全部' },
          { value: '1', label: '已实名' },
          { value: '0', label: '未实名' },
        ],
        options2: [
          { value: '', label: '全部' },
          { value: '0', label: '暂停使用' },
          { value: '1', label: '正常' },
        ],
        // columns: [
        //   {
        //     label: '真实姓名',
        //     width: 'auto',
        //     prop: 'name',
        //     sortable: true,
        //   },
        //   {
        //     label: '手机号码',
        //     width: 'auto',
        //     prop: 'mobile',
        //     sortable: true,
        //     disableCheck: true,
        //   },
        //   {
        //     label: '认证类型',
        //     width: 'auto',
        //     prop: 'type_text',
        //     sortable: true,
        //   },
        //   {
        //     label: '学校',
        //     width: 'auto',
        //     prop: 'school',
        //     sortable: true,
        //   },

        //   {
        //     label: '学号或工号',
        //     width: 'auto',
        //     prop: 'student_no',
        //     sortable: true,
        //   },
        //   {
        //     label: '年份',
        //     width: 'auto',
        //     prop: 'year',
        //     sortable: true,
        //   },

        //   {
        //     label: '所属区域',
        //     width: 'auto',
        //     prop: 'register_area',
        //     sortable: true,
        //   },
        //   {
        //     label: '审核时间',
        //     width: 'auto',
        //     prop: 'created_at',
        //     sortable: true,
        //   },
        //   {
        //     label: '失败原因',
        //     width: 'auto',
        //     prop: 'error_msg',
        //     sortable: true,
        //   },
        // ],
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        listLoading: false,
        border: true,
        metaList: {},
        dataList: [],
        form: {},
        // mobile: [],
        selectRows: '',
        // 初始状态下跳转页面的数据
        queryForm: {
          // is_card_certified: '',
          page: 1,
          per_page: 10,
          // mobile: '',
          // name: '',
        },
      }
    },
    created() {
      this.fetchData()
    },
    methods: {
      setSelectRows(val) {
        this.selectRows = val
      },
      // 重置按钮
      handleReset() {},
      handleSizeChange(val) {
        this.queryForm.per_page = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.queryForm.page = val
        this.fetchData()
      },
      handleQuery() {
        this.queryForm.page = 1
        this.fetchData()
      },
      // 设置按钮
      handleEditId(row) {
        this.$refs['show'].showEdit(row)
      },
      //选择实名状态
      changeName(e) {
        console.log(e, '选择实名状态')
        this.queryForm.user.is_card_certified = e
        // console.log(this.queryForm.user.is_card_certified, '111111111111')
      },
      changeStatus(e) {
        console.log(e, '显示骑行状态')

        this.queryForm.status = e
      },
      async fetchData() {
        this.listLoading = true
        console.log(this.queryForm, '第一个identifile里边的queryfrom')
        const { data, meta } = await getStudent(this.queryForm)
        console.log(this.queryForm, '第二个identifile里边的queryfrom')
        this.dataList = data
        console.log(data, 'dataList')
        this.metaList = meta
        this.total = meta.total
        this.listLoading = false
      },
    },
  }
</script>

<style scoped>
  .right {
    display: flex;
  }
  .top {
    display: flex;
    justify-content: space-between;
    font-size: 20px;
    padding-bottom: 10px;
  }
  .card {
    padding: 10px;
  }
  /* .right span:nth-of-type(1) {
    margin-right: 20px;
  } */
</style>
